<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>1.正则表达式初识 |  zfy的个人博客</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="./img/Scorpio.png">
    <link rel="stylesheet" href="./css/style.css">
    <meta name="description" content="My tech blog">
    
    <link rel="preload" href="./assets/css/0.styles.cfdaa54c.css" as="style"><link rel="preload" href="./assets/js/app.7878252f.js" as="script"><link rel="preload" href="./assets/js/2.877879cc.js" as="script"><link rel="preload" href="./assets/js/58.7d6367d9.js" as="script"><link rel="prefetch" href="./assets/js/10.a489e96f.js"><link rel="prefetch" href="./assets/js/11.f6f26a2f.js"><link rel="prefetch" href="./assets/js/12.8a827e29.js"><link rel="prefetch" href="./assets/js/13.e420b04a.js"><link rel="prefetch" href="./assets/js/14.52f00cc6.js"><link rel="prefetch" href="./assets/js/15.ef68d553.js"><link rel="prefetch" href="./assets/js/16.c2999dfd.js"><link rel="prefetch" href="./assets/js/17.0adb748c.js"><link rel="prefetch" href="./assets/js/18.2c077020.js"><link rel="prefetch" href="./assets/js/19.013b5e02.js"><link rel="prefetch" href="./assets/js/20.bb3b854e.js"><link rel="prefetch" href="./assets/js/21.28efc78c.js"><link rel="prefetch" href="./assets/js/22.4a1d71dd.js"><link rel="prefetch" href="./assets/js/23.605a5451.js"><link rel="prefetch" href="./assets/js/24.66bf035d.js"><link rel="prefetch" href="./assets/js/25.fbe72655.js"><link rel="prefetch" href="./assets/js/26.3f374d1f.js"><link rel="prefetch" href="./assets/js/27.556ea617.js"><link rel="prefetch" href="./assets/js/28.0cab868b.js"><link rel="prefetch" href="./assets/js/29.564f8747.js"><link rel="prefetch" href="./assets/js/3.4cfb1b9c.js"><link rel="prefetch" href="./assets/js/30.c4a099d1.js"><link rel="prefetch" href="./assets/js/31.7fbc3d2a.js"><link rel="prefetch" href="./assets/js/32.8f356b20.js"><link rel="prefetch" href="./assets/js/33.b5a1b0bb.js"><link rel="prefetch" href="./assets/js/34.57086c2e.js"><link rel="prefetch" href="./assets/js/35.2b4d0231.js"><link rel="prefetch" href="./assets/js/36.a99f6d64.js"><link rel="prefetch" href="./assets/js/37.eb25dcef.js"><link rel="prefetch" href="./assets/js/38.e45d8594.js"><link rel="prefetch" href="./assets/js/39.213e3a72.js"><link rel="prefetch" href="./assets/js/4.b86a0fbe.js"><link rel="prefetch" href="./assets/js/40.cadafdd6.js"><link rel="prefetch" href="./assets/js/41.23b0f26d.js"><link rel="prefetch" href="./assets/js/42.7c2b83c6.js"><link rel="prefetch" href="./assets/js/43.62f328ea.js"><link rel="prefetch" href="./assets/js/44.c4dfbd34.js"><link rel="prefetch" href="./assets/js/45.cde5bb22.js"><link rel="prefetch" href="./assets/js/46.6c62bdb8.js"><link rel="prefetch" href="./assets/js/47.4857766a.js"><link rel="prefetch" href="./assets/js/48.55a0cccc.js"><link rel="prefetch" href="./assets/js/49.3dceda91.js"><link rel="prefetch" href="./assets/js/5.13776f82.js"><link rel="prefetch" href="./assets/js/50.ab4d52fa.js"><link rel="prefetch" href="./assets/js/51.69ccc35a.js"><link rel="prefetch" href="./assets/js/52.01f3f711.js"><link rel="prefetch" href="./assets/js/53.c146a1ff.js"><link rel="prefetch" href="./assets/js/54.71ce70c2.js"><link rel="prefetch" href="./assets/js/55.98ef481d.js"><link rel="prefetch" href="./assets/js/56.b23daa51.js"><link rel="prefetch" href="./assets/js/57.6aa314ad.js"><link rel="prefetch" href="./assets/js/59.88894cf5.js"><link rel="prefetch" href="./assets/js/6.93d89692.js"><link rel="prefetch" href="./assets/js/60.111f9a04.js"><link rel="prefetch" href="./assets/js/61.add82aab.js"><link rel="prefetch" href="./assets/js/62.8bfac830.js"><link rel="prefetch" href="./assets/js/63.db44a5ca.js"><link rel="prefetch" href="./assets/js/64.0244f0ef.js"><link rel="prefetch" href="./assets/js/65.2be994de.js"><link rel="prefetch" href="./assets/js/66.c5066e37.js"><link rel="prefetch" href="./assets/js/67.c11b474b.js"><link rel="prefetch" href="./assets/js/68.276bdc3e.js"><link rel="prefetch" href="./assets/js/69.f5f39d50.js"><link rel="prefetch" href="./assets/js/7.ca9f7e96.js"><link rel="prefetch" href="./assets/js/70.e3ca02b0.js"><link rel="prefetch" href="./assets/js/71.befcf8f7.js"><link rel="prefetch" href="./assets/js/72.04fabafd.js"><link rel="prefetch" href="./assets/js/73.e5b707f2.js"><link rel="prefetch" href="./assets/js/74.b5668150.js"><link rel="prefetch" href="./assets/js/75.eb7cfac9.js"><link rel="prefetch" href="./assets/js/76.c1b76370.js"><link rel="prefetch" href="./assets/js/77.5875e953.js"><link rel="prefetch" href="./assets/js/78.a5e2fa5b.js"><link rel="prefetch" href="./assets/js/79.eb2d51a7.js"><link rel="prefetch" href="./assets/js/8.570c39ea.js"><link rel="prefetch" href="./assets/js/80.7252ac50.js"><link rel="prefetch" href="./assets/js/81.eb980d26.js"><link rel="prefetch" href="./assets/js/82.9e069d8f.js"><link rel="prefetch" href="./assets/js/83.8c5a6dc6.js"><link rel="prefetch" href="./assets/js/84.26baaa09.js"><link rel="prefetch" href="./assets/js/85.96bc7e77.js"><link rel="prefetch" href="./assets/js/86.9c9dd1ca.js"><link rel="prefetch" href="./assets/js/87.d54639b8.js"><link rel="prefetch" href="./assets/js/88.3d3ae1e1.js"><link rel="prefetch" href="./assets/js/89.a81caa83.js"><link rel="prefetch" href="./assets/js/9.7a58df3d.js"><link rel="prefetch" href="./assets/js/90.c3c347ed.js"><link rel="prefetch" href="./assets/js/91.b6240032.js"><link rel="prefetch" href="./assets/js/92.8331718a.js"><link rel="prefetch" href="./assets/js/93.ca174cfa.js"><link rel="prefetch" href="./assets/js/94.fec3300c.js"><link rel="prefetch" href="./assets/js/95.076b06fb.js"><link rel="prefetch" href="./assets/js/96.8ed8b32f.js">
    <link rel="stylesheet" href="./assets/css/0.styles.cfdaa54c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/./" class="home-link router-link-active"><!----> <span class="site-name"> zfy的个人博客</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="http://127.0.0.1:3002/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  自由博客板块
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="http://zfyangelo.gitee.io/yu-weather-web-show/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  天气预报
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/./guide/" class="nav-link router-link-active">
  个人的学习笔记
</a></div><div class="nav-item"><a href="/./baodian/interview/" class="nav-link">
  项目及在校经历
</a></div><div class="nav-item"><a href="/./baodian/talk/" class="nav-link">
  爱好和联系方式
</a></div><div class="nav-item"><a href="https://gitee.com/zfyangelo" target="_blank" rel="noopener noreferrer" class="nav-link external">
  我的gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Javascipt</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/./guide/notes/js/01-认识javaScript.html" class="sidebar-link">01-认识javaScript</a></li><li><a href="/./guide/notes/js/02-变量与数据类型介绍.html" class="sidebar-link">02-变量与数据类型介绍</a></li><li><a href="/./guide/notes/js/03-基础dom操作.html" class="sidebar-link">03-基础dom操作</a></li><li><a href="/./guide/notes/js/04-表达式和操作符.html" class="sidebar-link">04-表达式和操作符</a></li><li><a href="/./guide/notes/js/05-判断.html" class="sidebar-link">05-判断</a></li><li><a href="/./guide/notes/js/06-循环.html" class="sidebar-link">06-循环</a></li><li><a href="/./guide/notes/js/07-算法拓展.html" class="sidebar-link">07-算法拓展</a></li><li><a href="/./guide/notes/js/08-函数.html" class="sidebar-link">08-函数</a></li><li><a href="/./guide/notes/js/09-作用域,闭包,预解析.html" class="sidebar-link">09-作用域,闭包,预解析</a></li><li><a href="/./guide/notes/js/10-数组.html" class="sidebar-link">10-数组</a></li><li><a href="/./guide/notes/js/11-字符串.html" class="sidebar-link">11-字符串</a></li><li><a href="/./guide/notes/js/12-类型转换.html" class="sidebar-link">12-类型转换</a></li><li><a href="/./guide/notes/js/13-DOM进阶.html" class="sidebar-link">13-DOM进阶</a></li><li><a href="/./guide/notes/js/14-dom事件与机制.html" class="sidebar-link">14-dom事件与机制</a></li><li><a href="/./guide/notes/js/15-浏览器M操作.html" class="sidebar-link">15-浏览器M操作</a></li><li><a href="/./guide/notes/js/16-toProject.html" class="sidebar-link">16-toProject</a></li><li><a href="/./guide/notes/js/17-内置数学和时间project.html" class="sidebar-link">17-内置数学和时间project</a></li><li><a href="/./guide/notes/js/18-各种距离宽高获取.html" class="sidebar-link">18-各种距离宽高获取</a></li><li><a href="/./guide/notes/js/19-正则表达式.html" class="active sidebar-link">19-正则表达式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_1-正则表达式初识" class="sidebar-link">1.正则表达式初识</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_2-正则表达式的创建" class="sidebar-link">2.正则表达式的创建</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_3-元字符" class="sidebar-link">3.元字符</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_4-方括号表示法" class="sidebar-link">4.方括号表示法</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_5-量词" class="sidebar-link">5.量词</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_6-修饰符" class="sidebar-link">6.修饰符</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_7-正则表达式的相关方法" class="sidebar-link">7.正则表达式的相关方法</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_8-字符串的相关方法" class="sidebar-link">8.字符串的相关方法</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_9-正则表达式的应用" class="sidebar-link">9.正则表达式的应用</a></li><li class="sidebar-sub-header"><a href="/./guide/notes/js/19-正则表达式.html#_10-课程总结" class="sidebar-link">10.课程总结</a></li></ul></li><li><a href="/./guide/notes/js/21-箭头函数.html" class="sidebar-link">20箭头函数</a></li><li><a href="/./guide/notes/js/22-解构赋值.html" class="sidebar-link">21-解构赋值</a></li><li><a href="/./guide/notes/js/23-project字面量增强和函数默认参数.html" class="sidebar-link">22-project字面量增强和函数默认参数</a></li><li><a href="/./guide/notes/js/24-剩余参数和展开运算符.html" class="sidebar-link">23-剩余参数和展开运算符</a></li><li><a href="/./guide/notes/js/25-Set 和 Map数据结构和Symbol.html" class="sidebar-link">24-Set 和 Map数据结构和Symbol</a></li><li><a href="/./guide/notes/js/26-遍历器和for-of循环.html" class="sidebar-link">25-遍历器和for-of循环</a></li><li><a href="/./guide/notes/js/27-Promise.html" class="sidebar-link">26-Promise</a></li><li><a href="/./guide/notes/js/28-Clsss类.html" class="sidebar-link">27-Clsss类</a></li><li><a href="/./guide/notes/js/29-module模块.html" class="sidebar-link">28-module模块</a></li><li><a href="/./guide/notes/js/30-Babel.html" class="sidebar-link">29-Babel</a></li><li><a href="/./guide/notes/js/31-前后端通信和HTTP协议.html" class="sidebar-link">30-前后端通信和HTTP协议</a></li><li><a href="/./guide/notes/js/32-本地存储.html" class="sidebar-link">31-本地存储</a></li><li><a href="/./guide/notes/js/33-ajax.html" class="sidebar-link">32-ajax</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS练习</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Javascipt练习</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="_1-正则表达式初识"><a href="#_1-正则表达式初识" class="header-anchor">#</a> 1.正则表达式初识</h2> <p>正则表达式(regular expression）<strong>描述了字符串的“构成模式”</strong>，经常被用于检查字符串是否符合预定的格式要求</p> <p><a href="https://imgchr.com/i/BDaiFK" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/02/BDaiFK.png" alt="BDaiFK.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>用一个例子快速演示正则表达式基本使用方法:检查某个字符串是否是6位数字</p></blockquote> <p><a href="https://imgchr.com/i/BDUaGD" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/02/BDUaGD.png" alt="BDUaGD.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>正则表达式“按位”描述规则</strong></p> <blockquote><p>正则表达式“按位”描述规则，是指它是一位一位的描述字符串的构成形式</p> <p>比如检查字符串是不是这样的:以字母m开头，然后是3个数字，最后以字母n结尾</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^m\d\d\dn$</span><span class="token regex-delimiter">/</span></span>

<span class="token comment">//^表示开头，$表示结尾，\d表示数字   \d\d\d也可以写作\d{3}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>定义正则表达式</strong></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 这个正则表达式表示一个形式：以m开头，n结尾，中间是6位数字</span>
<span class="token keyword">var</span> regexp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^m\d{6}n$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

<span class="token keyword">let</span> str1 <span class="token operator">=</span> <span class="token string">'m123456n'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str2 <span class="token operator">=</span> <span class="token string">'m1234567n'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str3 <span class="token operator">=</span> <span class="token string">'m123b56n'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str4 <span class="token operator">=</span> <span class="token string">'123456'</span><span class="token punctuation">;</span>


console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str4<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="_2-正则表达式的创建"><a href="#_2-正则表达式的创建" class="header-anchor">#</a> 2.正则表达式的创建</h2> <blockquote><p>使用**/内容/**的语法形式，可以快速创建正则表达式</p> <p>也可以使用**new RegExp('内容')**的形式，创建正则表达式</p> <p>使用<strong>typeof运算符检查正则表达式的类型，结果是object</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 创建正则表达式方法1</span>
<span class="token keyword">let</span> regexp1 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\d{6}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

<span class="token comment">// 创建正则表达式方法2</span>
<span class="token keyword">let</span> regexp2 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">'^\\d{6}$'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">//一个反斜杠是转义字符</span>

<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'555666'</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp2<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// true</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> regexp1<span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// object</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> regexp2<span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token comment">// object</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><h2 id="_3-元字符"><a href="#_3-元字符" class="header-anchor">#</a> 3.元字符</h2> <blockquote><p>“元字符”是指一位指定类型的字符</p></blockquote> <p><a href="https://imgchr.com/i/BDwS56" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/02/BDwS56.png" alt="BDwS56.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>开头和结尾</strong></p> <p><a href="https://imgchr.com/i/BDwKG8" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/02/BDwKG8.png" alt="BDwKG8.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="元字符注意事项"><a href="#元字符注意事项" class="header-anchor">#</a> 元字符注意事项</h3> <blockquote><p>如果使用new RegExp()写法，反斜杠需要多写一个</p> <p>比如   <strong>/^\d$/</strong>  和   <strong>new RegExp( '^\\d$')</strong>  是相同的意思</p></blockquote> <h3 id="元字符使用举例"><a href="#元字符使用举例" class="header-anchor">#</a> 元字符使用举例</h3> <h4 id="题目1"><a href="#题目1" class="header-anchor">#</a> 题目1</h4> <blockquote><p>某快递公司运单号形式是这样的:123-4567-890，请使用正则表达式检查某字符串是否符合此格式</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//正则表达式</span>
<span class="token keyword">let</span> regexp1 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\d\d\d-\d\d\d-\d\d\d$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

<span class="token comment">//待测试的字符串</span>
<span class="token keyword">let</span> str1 <span class="token operator">=</span> <span class="token string">&quot;111-222-333&quot;</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str1<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h4 id="题目2"><a href="#题目2" class="header-anchor">#</a> 题目2</h4> <blockquote><p>某产品的验证秘钥形式是这样的:口口口-口口口口-口口口,其中表示字母数字或者下划线，请使用正则表达式检查某字符串是否符合此格式</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//   正则表达式  /w是字母数字下划线</span>
<span class="token keyword">let</span> regexp2 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\w\w\w-\w\w\w-\w\w\w$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token comment">//待测试的字符串</span>
<span class="token keyword">let</span> str2 <span class="token operator">=</span> <span class="token string">&quot;abc-abc-__1&quot;</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp2<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="字符的转义"><a href="#字符的转义" class="header-anchor">#</a> 字符的转义</h3> <blockquote><p>在特殊字符之前的反斜杠\表示下一个字符不是特殊字符，应该按照字面理解</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator">/</span><span class="token punctuation">.</span>$<span class="token operator">/</span>   <span class="token operator">===</span><span class="token operator">===</span><span class="token operator">&gt;</span>  <span class="token comment">//检查字符串是不是任意字符</span>

<span class="token operator">/</span>\<span class="token punctuation">.</span>$<span class="token operator">/</span>  <span class="token operator">===</span><span class="token operator">===</span><span class="token operator">&gt;</span>  <span class="token comment">//检查字符串是不是一个点</span>

<span class="token operator">/</span><span class="token operator">^</span>\\$<span class="token operator">/</span>  <span class="token operator">===</span><span class="token operator">===</span><span class="token operator">&gt;</span> <span class="token comment">//检查字符串是不是一个反斜杠  </span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>不管一个符号有没有特殊意义，都可以在其之前加上一个\以确保它表达的是这个符号本身</li></ul> <p><strong>举例</strong></p> <blockquote><p>举例:某产品批号形式为:123.45^67#89，请使用正则表达式检查某字符串是否符合此格式</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> regexp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\d\d\d\.\d\d\^\d\d\#\d\d$</span><span class="token regex-delimiter">/</span></span>

<span class="token comment">//待测试的字符串</span>
<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;666.55^34#21&quot;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="_4-方括号表示法"><a href="#_4-方括号表示法" class="header-anchor">#</a> 4.方括号表示法</h2> <blockquote><p>使用方括号，比如[xyz]，可以创建<strong>一个字符集合</strong>，表示匹配方括号中的任意字符</p> <p>比如某学校的学号规定:第1位是一个字母，b表示本科生，y表示研究生，后面是7位数字，用正则表示为:</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[by]\d{7}$</span><span class="token regex-delimiter">/</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">//正则表达式</span>
<span class="token keyword">let</span> regexp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[yb]\d{7}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;b7788899&quot;</span><span class="token punctuation">;</span>
<span class="token comment">//使用正则表达式进行检查</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p>可以使用<strong>短横-来指定一个字符范围，^表示否定</strong></p></blockquote> <p><a href="https://imgchr.com/i/BrPz0P" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/02/BrPz0P.png" alt="BrPz0P.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="方括号表示法小题目"><a href="#方括号表示法小题目" class="header-anchor">#</a> 方括号表示法小题目</h3> <h4 id="题目1-2"><a href="#题目1-2" class="header-anchor">#</a> 题目1</h4> <blockquote><p>请验证某字符串是否是5位字母，大小写均可</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str1 <span class="token operator">=</span> <span class="token string">&quot;abcdf&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> regexp1 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-zA-Z]{5}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="题目2-2"><a href="#题目2-2" class="header-anchor">#</a> 题目2</h4> <blockquote><p>请验证某字符串是否是5位，且仅有小写字母、点构成</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> regexp2 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-z\.]{5}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

<span class="token keyword">let</span> str2 <span class="token operator">=</span> <span class="token string">&quot;as.aw&quot;</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp2<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h4 id="题目3"><a href="#题目3" class="header-anchor">#</a> 题目3</h4> <blockquote><p>请验证某字符串是否是4位小写字母，且最后一位不能是m字母</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str3 <span class="token operator">=</span> <span class="token string">&quot;abcd&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str4 <span class="token operator">=</span> <span class="token string">&quot;abcm&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str5 <span class="token operator">=</span> <span class="token string">&quot;abc1&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> regexp3 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-z]{3}[a-ln-z]</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>  regexp3<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str3<span class="token punctuation">)</span>  <span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>  regexp3<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str4<span class="token punctuation">)</span>  <span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>  regexp3<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str5<span class="token punctuation">)</span>  <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="_5-量词"><a href="#_5-量词" class="header-anchor">#</a> 5.量词</h2> <p><a href="https://imgchr.com/i/BhrrF0" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/06/BhrrF0.png" alt="BhrrF0.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="题目1-3"><a href="#题目1-3" class="header-anchor">#</a> 题目1:</h3> <blockquote><p>请验证字符串是否符合手机号码的规则:11位数字，并且肯定以1开头</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str1 <span class="token operator">=</span> <span class="token string">'13812345678'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str2 <span class="token operator">=</span> <span class="token string">'138123456789'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str3 <span class="token operator">=</span> <span class="token string">'38123456789'</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> regexp1 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^1\d{10}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str1<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false </span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp1<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//false</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="题目2-3"><a href="#题目2-3" class="header-anchor">#</a> 题目2:</h3> <blockquote><p>请验证某字符串是否是这样的:以字母开头，中间是任意位数字(最少1位）构成，并以字母结尾</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str4 <span class="token operator">=</span> <span class="token string">'a123123123b'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str5 <span class="token operator">=</span> <span class="token string">'abcd'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str6 <span class="token operator">=</span> <span class="token string">'a1213b'</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> regexp2 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-zA-Z]\d+[a-zA-Z]$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp2<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str4<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp2<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str5<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp2<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str6<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="题目3-2"><a href="#题目3-2" class="header-anchor">#</a> 题目3:</h3> <blockquote><p>请验证某字符串是否符合网址规则:以www .开头，中间是任意位的字符（字母数字下划线,最少一位)，最后以.com结尾，也可以以.com.cn结尾</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str7 <span class="token operator">=</span> <span class="token string">'www.baidu.com'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str8 <span class="token operator">=</span> <span class="token string">'www.sina.com.cn'</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> str9 <span class="token operator">=</span> <span class="token string">'www.news.cn'</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> regexp3 <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^www\.\w+\.com(\.cn)?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp3<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str7<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp3<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str8<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>regexp3<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str9<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="_6-修饰符"><a href="#_6-修饰符" class="header-anchor">#</a> 6.修饰符</h2> <blockquote><p>修饰符也叫作标志(flags)，用于使用正则表达式实现高级搜索</p></blockquote> <p><a href="https://imgchr.com/i/BLhZKU" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/10/BLhZKU.png" alt="BLhZKU.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="修饰符的使用"><a href="#修饰符的使用" class="header-anchor">#</a> 修饰符的使用:</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> re <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">m</span><span class="token regex-delimiter">/</span><span class="token regex-flags">gi</span></span><span class="token punctuation">;</span>

<span class="token keyword">let</span> re <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span> <span class="token string">'m'</span><span class="token punctuation">,</span> <span class="token string">'gi '</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="_7-正则表达式的相关方法"><a href="#_7-正则表达式的相关方法" class="header-anchor">#</a> 7.正则表达式的相关方法</h2> <p><a href="https://imgchr.com/i/BhyUVs" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/06/BhyUVs.png" alt="BhyUVs.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <blockquote><p>正则表达式的test()方法用来<strong>测试某字符串是否匹配此正则表达式</strong>，它返回true或false</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[a-z]{3}[a-ln-z]$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'abcd'</span><span class="token punctuation">)</span>  <span class="token comment">//true</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>exec()方法功能是:在一个指定字符串中执行一个<strong>搜索匹配查找</strong>，返回一个结果数组或null</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;abc123def456ghi789&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> regexp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> regexp<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p><strong>结果如下</strong></p> <p><a href="https://imgchr.com/i/BhyTMD" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/06/BhyTMD.png" alt="BhyTMD.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="exec方法的逐条遍历"><a href="#exec方法的逐条遍历" class="header-anchor">#</a> exec方法的逐条遍历</h3> <blockquote><p>exec()方法最有趣的是，<strong>有“g”修饰符的正则表达式将自动成为“有状态”的</strong>，这意味着可以对单个字</p> <p>符串中的多次匹配结果进行<strong>逐条的遍历</strong></p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;abc123def456ghi789&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> regexp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>  <span class="token comment">//有g修饰符   +表示贪婪 尽可能多的匹配</span>
<span class="token keyword">let</span> result1 <span class="token operator">=</span> regexp<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result2 <span class="token operator">=</span> regexp<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result3 <span class="token operator">=</span> regexp<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>   <span class="token comment">//逐条遍历</span>
<span class="token keyword">let</span> result4 <span class="token operator">=</span> regexp<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result1<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result2<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result3<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result4<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><a href="https://imgchr.com/i/Bh6tSK" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/06/Bh6tSK.png" alt="Bh6tSK.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <p><strong>使用循环语句简化流程</strong></p> <blockquote><p>使用循环语句来循环执行exec，寻找所有的匹配结果</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;abc123def456ghi789&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> regexp <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">;</span>  <span class="token comment">//有g修饰符</span>
<span class="token keyword">let</span> result<span class="token punctuation">;</span>
<span class="token keyword">while</span><span class="token punctuation">(</span>result <span class="token operator">=</span> regexp<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="_8-字符串的相关方法"><a href="#_8-字符串的相关方法" class="header-anchor">#</a> 8.字符串的相关方法</h2> <blockquote><p>字符串有哪些方法可以使用正则表达式呢?</p></blockquote> <p><a href="https://imgchr.com/i/BhcE0H" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/06/BhcE0H.png" alt="BhcE0H.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;abc123def4567rt89yro&quot;</span><span class="token punctuation">;</span>

<span class="token comment">// search()方法，很像indexOf()，返回查找到的第一个下标，如果找不到就是-1</span>
<span class="token keyword">let</span> result1 <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> result2 <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">search</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">m</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result1<span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result2<span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// -1</span>


<span class="token comment">// match()方法，返回查找到的数组，找不到就是null</span>
<span class="token keyword">let</span> result3 <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result3<span class="token punctuation">)</span><span class="token punctuation">;</span>     <span class="token comment">// [&quot;123&quot;, &quot;4567&quot;, &quot;89&quot;]</span>


<span class="token comment">// replace()方法，进行替换</span>
<span class="token keyword">let</span> result4 <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">[a-z]+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token string">&quot;*&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 注意+表示贪婪的，尽可能多的连续匹配小写字母</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result4<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// *123*4567*89*</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="_9-正则表达式的应用"><a href="#_9-正则表达式的应用" class="header-anchor">#</a> 9.正则表达式的应用</h2> <blockquote><p>用正则表达式进行表单验证是正则表达式最重要的实际应用</p> <p>实际上，很多正则表达式不需要我们自己写，可以通过搜索引擎查找，可以拿来即用</p></blockquote> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
            <span class="token selector">.warning</span> <span class="token punctuation">{</span>
                <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
                <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>

            <span class="token selector">.pass</span> <span class="token punctuation">{</span>
                <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
                <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
                请输入中文姓名：
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name-field<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name-warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>输入的姓名不合法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pass<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>name-pass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>输入的姓名合法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
                请输入手机号码：
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tel-field<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tel-warining<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>输入的手机号码不合法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pass<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tel-pass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>输入的手机号码合法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>
                请输入Email：
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email-field<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>warning<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email-warning<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>输入的Email不合法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>pass<span class="token punctuation">&quot;</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>email-pass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>输入的Email合法<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
            <span class="token keyword">let</span> nameField <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;name-field&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> telField <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;tel-field&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> emailField <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;email-field&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> nameWarning <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;name-warning&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> telWarning <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;tel-warining&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> emailWarning <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;email-warning&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> namePass <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;name-pass&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> emailPass <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;email-pass&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">let</span> telPass <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">&quot;tel-pass&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


            <span class="token comment">// 当文本框失去焦点，就是光标不在文本框中了</span>
            nameField<span class="token punctuation">.</span><span class="token function-variable function">onblur</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// 得到姓名</span>
                <span class="token keyword">let</span> name <span class="token operator">=</span> nameField<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4E00-\u9FA5]{2,4}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 如果通过校验</span>
                    nameWarning<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
                    namePass<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;inline&quot;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 如果没有通过校验</span>
                    nameWarning<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;inline&quot;</span><span class="token punctuation">;</span>
                    namePass<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">;</span>



            telField<span class="token punctuation">.</span><span class="token function-variable function">onblur</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// 得到电话</span>
                <span class="token keyword">let</span> tel <span class="token operator">=</span> telField<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^1\d{10}$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>tel<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 如果通过校验</span>
                    telWarning<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
                    telPass<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;inline&quot;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 如果没有通过校验</span>
                    telWarning<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;inline&quot;</span><span class="token punctuation">;</span>
                    telPass<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">;</span>

            emailField<span class="token punctuation">.</span><span class="token function-variable function">onblur</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// 得到email</span>
                <span class="token keyword">let</span> email <span class="token operator">=</span> emailField<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
                <span class="token comment">// 合法的email都是abc_def123@abc.net</span>

                <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^\w{2,}\@\w{2,}\.[a-z]{2,4}(\.[a-z]{2,4})?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>email<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 如果通过校验</span>
                    emailWarning<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
                    emailPass<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;inline&quot;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 如果没有通过校验</span>
                    emailWarning<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;inline&quot;</span><span class="token punctuation">;</span>
                    emailWarning<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span><span class="token punctuation">;</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br></div></div><p><a href="https://imgchr.com/i/BLWgl8" target="_blank" rel="noopener noreferrer"><img src="https://s1.ax1x.com/2020/11/10/BLWgl8.png" alt="BLWgl8.png"><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="_10-课程总结"><a href="#_10-课程总结" class="header-anchor">#</a> 10.课程总结</h2> <blockquote><p>元字符、量词、方括号表示法必须要熟悉</p> <p>正则表达式和字符串的常用方法要熟悉</p> <p>会用百度搜索常见的正则表达式即可</p></blockquote></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/./guide/notes/js/18-各种距离宽高获取.html" class="prev">
        18-各种距离宽高获取
      </a></span> <span class="next"><a href="/./guide/notes/js/21-箭头函数.html">
        20箭头函数
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><div class="reco-bgm-panel" data-v-b1d3339e><audio id="bgm" src="https://www.ytmp3.cn/down/75475.mp3" data-v-b1d3339e></audio> <div class="reco-float-box" style="bottom:30px;z-index:999999;display:none;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><img src="https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200" data-v-b1d3339e></div> <div class="reco-bgm-box" style="left:10px;bottom:10px;z-index:999999;" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="reco-bgm-cover" style="background-image:url(https://p1.music.126.net/qTSIZ27qiFvRoKj-P30BiA==/109951165895951287.jpg?param=200y200);" data-v-b1d3339e><div class="mini-operation" style="display:none;" data-v-b1d3339e><i class="reco-bgm reco-bgm-pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play" style="display:none;" data-v-b1d3339e></i></div> <div class="falut-message" style="display:none;" data-v-b1d3339e>
          播放失败
        </div></div> <div class="reco-bgm-info" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-music music" data-v-b1d3339e></i>花花公子</div> <div class="info-box" data-v-b1d3339e><i class="reco-bgm reco-bgm-artist" data-v-b1d3339e></i>马思唯/step.jad</div> <div class="reco-bgm-progress" data-v-b1d3339e><div class="progress-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div> <div class="reco-bgm-operation" data-v-b1d3339e><i class="reco-bgm reco-bgm-last last" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-pause pause" style="display:none;" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-play play" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-next next" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-volume1 volume" data-v-b1d3339e></i> <i class="reco-bgm reco-bgm-mute mute" style="display:none;" data-v-b1d3339e></i> <div class="volume-bar" data-v-b1d3339e><div class="bar" data-v-b1d3339e></div></div></div></div> <div class="reco-bgm-left-box" data-v-b1d3339e data-v-41bcba48 data-v-b1d3339e><i class="reco-bgm reco-bgm-left" data-v-b1d3339e></i></div></div></div></div></div>
    <script src="./assets/js/app.7878252f.js" defer></script><script src="./assets/js/2.877879cc.js" defer></script><script src="./assets/js/58.7d6367d9.js" defer></script>
  </body>
</html>
